<template>
  <el-row :gutter="0" type="flex" justify="start">
    <div class="maplist-right">
      <el-form>
        <el-radio-group class="cut" v-model="map" @change="changeChartType">
          <el-radio label="bar">柱状图</el-radio>
          <el-radio label="pie">饼状图</el-radio>
          <el-radio label="line">折线图</el-radio>
        </el-radio-group>
      </el-form>
    </div>

    <el-col :span="24">
      <!--      <div class="map">
        <template v-if="map === 'bar'">
          <EchartsBar></EchartsBar>
          <EchartsBar class="bar2"></EchartsBar>
          <EchartsBar class="bar3"></EchartsBar>
          &lt;!&ndash; <div class="time-line">
            <button class="time-button fa fa-play"></button>
            <div class="lin-center">
              <button class="back-btn fa fa-step-backward"></button>
              <div class="line">
                <div class="skate-wheel" style="left: 66px"></div>
              </div>
              <button class="next-btn fa fa-step-forward"></button>
            </div>
            <label class="current-tick">2022年02月13日 20:00:00</label>
            <a class="current-tick">X</a>
          </div> &ndash;&gt;
          <el-slider class="time-line" v-model="value" range :marks="marks">
          </el-slider>
        </template>
        <template v-else-if="map === 'line'">
          <EchartsLine></EchartsLine>
          <EchartsLine class="bar2"></EchartsLine>
          <EchartsLine class="bar3"></EchartsLine>
        </template>
        <template v-else>
          <EchartsPie></EchartsPie>
          <EchartsPie class="bar2"></EchartsPie>
          <EchartsPie class="bar3"></EchartsPie>
          <el-slider class="time-line" v-model="value" range :marks="marks">
          </el-slider>
        </template>
      </div>-->
      <div class="map">
        <div
          id="mapDiv"
          style="
            position: absolute;
            top: 0px;
            left: 0px;
            height: 100%;
            width: 100%;
            z-index: 0;
          "
        ></div>
        <template v-if="map === 'bar'">
          <EchartsBar class="bar1"></EchartsBar>
          <EchartsBar class="bar2"></EchartsBar>
          <EchartsBar class="bar3"></EchartsBar>
          &lt;!&ndash;
          <!-- <div class="time-line">
              <button class="time-button fa fa-play"></button>
              <div class="lin-center">
                <button class="back-btn fa fa-step-backward"></button>
                <div class="line">
                  <div class="skate-wheel" style="left: 66px"></div>
                </div>
                <button class="next-btn fa fa-step-forward"></button>
              </div>
              <label class="current-tick">2022年02月13日 20:00:00</label>
              <a class="current-tick">X</a>
            </div> -->
          &ndash;&gt;
          <el-slider class="time-line" v-model="value" range :marks="marks">
          </el-slider>
        </template>
        <template v-else-if="map === 'line'">
          <EchartsLine
            class="bar1"
            style="margin-left: 20px;margin-top:20px"
          ></EchartsLine>
          <EchartsLine class="bar2"></EchartsLine>
          <EchartsLine class="bar3"></EchartsLine>
        </template>
        <template v-else>
          <EchartsPie class="bar1"></EchartsPie>
          <EchartsPie class="bar2"></EchartsPie>
          <EchartsPie class="bar3"></EchartsPie>
          <el-slider class="time-line" v-model="value" range :marks="marks">
          </el-slider>
        </template>
      </div>
    </el-col>
  </el-row>
</template>

<script>
import EchartsBar from "./EchartsBar.vue";
import EchartsLine from "./EchartsLine.vue";
import EchartsPie from "./EchartsPie.vue";
export default {
  components: {
    EchartsBar,
    EchartsLine,
    EchartsPie,
  },
  data() {
    return {
      show: false,
      map: "bar",
      mapShow: false,
      value: [0, 50],
      marks: {
        0: "0",
        8: "8",
        37: "37",
        // 50: {
        //   style: {
        //     color: "#1989FA",
        //   },
        //   label: this.$createElement("strong", "50%"),
        // },
        80: "80",
      },
    };
  },
  mounted() {
    this.nodeUpdata(this.$route.query.key);
    setTimeout(() => {
      let projection = ol.proj.get("EPSG:4326");

      let wmsLayer = new ol.layer.Tile({
        source: new ol.source.TileWMS({
          url: "http://152.136.124.52:8088/earthview/rest/services/mapserver/wms",
          params: {
            FORMAT: "image/png",
            VERSION: "1.1.1",
            LAYERS: "zhen",
            serviceName: "zhen",
            styles: "",
            SRS: "EPSG:4326",
            TILED: true,
          },
        }),
      });

      let view = new ol.View({
        center: [114.207, 36.47],
        zoom: 13,
        projection: projection,
      });
      //天地图底图
      let roadLayer = new ol.layer.Tile({
        id: "roadLayer",
        title: "天地图",
        visible: true,
        layerName: "baseMap",
        source: new ol.source.XYZ({
          url: "http://t0.tianditu.gov.cn/DataServer?T=vec_w&tk=118d298c681ec22dca3eadf32e8cbd4c&x={x}&y={y}&l={z}",
        }),
      });

      let zoom = new ol.control.Zoom();
      let map = new ol.Map({
        target: "mapDiv",
        controls: [zoom],
        view: view,
        // layers: [roadLayer, wmsLayer],
        layers: [roadLayer],
      });
    }, 500);
  },
  watch: {
    $route(e) {
      this.nodeUpdata(e.query.key);
    },
  },
  methods: {
    nodeUpdata(key) {
      if (key == "" || key == null) {
        this.show = true;
      } else {
        this.show = true;
      }
    },
    changeChartType(e) {
      if (e == "bar") {
        this.map = "bar";
      } else if (e == "line") {
        this.map = "line";
      } else {
        this.map = "pie";
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.time-line {
  width: 300px;
  height: 30px;
  // float: right;
  // margin-right: 200px;
  background-color: #c7c7c7c9;
  padding: 20px;
  padding-top: 10px;
  border-radius: 5px;
  position: absolute;
  top: 55px;
  right: 100px;
  // right: 0;
  z-index: 999;
  // .el-slider {
  //   // color: red;
  // }
  .time-button {
    float: left;
    margin-top: 5px;
  }
  .lin-center {
    // .back-btn {
    // }
    .line {
      width: 50%;
      height: 10px;
      background-color: blue;
      float: left;
      border-radius: 10px;
      margin-top: 10px;
    }
  }
}
.bar1 {
  float: left;
  margin-left: 50px;
  margin-top: 20px;
}
.bar2 {
  float: left;
  margin-left: 300px;
  margin-top: 200px;
}
.bar3 {
  float: left;
  top: 200px;
  position: absolute;
}
.el-row {
  height: 100%;
  padding-bottom: 30px;
}
.maplist-right {
  float: left;
  margin-top: 20px;
  margin-left: -15px;

  .el-tree {
    width: 200px;
    float: left;
    background-color: transparent;
    ::v-deep .el-tree-node {
      .el-tree-node__content {
        margin-bottom: -1px;
        padding: 20px 10px;
        .el-tree-node__expand-icon {
          padding: 0;
        }
      }
      .el-tree-node__content:hover {
        background-color: transparent;
      }
    }
    ::v-deep.el-tree-node.is-current > .el-tree-node__content {
      background-color: transparent;
    }
    ::v-deep.el-tree-node__label {
      width: 100px;
      font-size: 18px;
      color: #111;
      border: 1px solid #111;
      padding: 20px 50px 0 0;
    }
  }
}
.cut {
  width: 80px;
  float: left;
  position: absolute;
  right: 20px;
  z-index: 999;

  ::v-deep .el-radio {
    margin: 5px 0;
    padding: 10px;
    color: #409eff;
    background-color: #fff;
    border-radius: 5px;
    .el-radio__input.is-checked + .el-radio__label {
      color: #111 !important;
    }
    .el-radio__inner:hover {
      border-color: #dcdfe6;
    }
    .el-radio__input.is-checked .el-radio__inner {
      background: #fff !important;
    }
    .el-radio__input.is-checked .el-radio__inner::after {
      width: 5px;
      height: 5px;
      background-color: #409eff !important;
    }
  }
}
.map {
  width: 100%;
  height: 100%;
  float: left;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  background-position: center center;
  position: relative;
}
</style>